// widget tree structure

h3.tab-title {
  line-height:36px;
  background:$lightGray;
  font-size:$f-regular;
  color:$tabTitle;
  font-weight:normal;
  padding-left:6px;
  border-bottom:1px solid darken($lightGray,10%);
  .btn {
    margin-top:6px;
    margin-right:6px;
    padding-left:3px;
    padding-right:3px;
  }
}
.nav-tabs {
  &.single-row-tabs {
    border-bottom: none;
  }
}

ul.single-row-tabs {
  margin-right: 7px;
  li {
    float: none;
    clear: both;
    padding: 0;
    margin: 0;
    a {
      display: block;
    }
    .item-identifier {
      line-height: 28px;
      @include oneline();
    }
  }
  .no-result {
    text-align: center;
    font-weight: bold;
    color: $darkGray;
    line-height: 20px;
  }
}
ul.tree-structure {
  @include reset-list();
  .no-data {
    border:1px solid $lightGray;
    @include border-radius();
    margin-left:26px;
    color:$gray;
    text-align:center;
    color:$disabled;
    font-size:$f-small;
    margin-bottom:6px;
  }
  &.single-row-tabs {
    margin-right: 7px;
  }
  &.one-line-structure {
    .title {
      @include oneline();
    }
    .item-title {
      margin-left: 13px;
    }
  }
  li {
    line-height:31px;
    @include default-border-bottom();
    .item-actions {
      a {
        display: inline-block;
      }
    }
    .custom-popover-trigger {
      text-decoration: none;
      display: block;
    }
    &:hover {
      background:#f8f8f8;
    }
    &:last-child {
      border-bottom:none;
    }
    &.pbc-item {
      line-height: 28px;
    }
    &.tab-title-holder {
      padding: 0;
      border: none;
      [class^="grcicon-"] {
        margin-top: 10px;
        margin-right: 6px;
      }
      i {
        @include opacity(0.4);
        @include transition(opacity 0.3s ease);
      }
      &:hover {
        background:none;
        border: none;
        i {
          @include opacity(1);
        }
      }
      h3 {
        padding-left: 10px;
      }
      .main-tab-title {
        font-weight: bold;
        color: $text;
      }
    }
    [class^="grcicon-"] {
      display: inline-block;
      margin-top: 7px;
    }
    .grcobject {
      [class^="grcicon-"] {
        margin-top: 4px;
      }
    }
    .objects-count {
      white-space: nowrap;
      [class^="grcicon-"] {
        margin-top: 7px;
      }
      small {
        font-size:$f-small;
        color:$gray !important;
      }
      .grcicon-section-black {
        background-position:-200px -104px;
      }
      a {
        @include opacity(0.3);
        @include transition(opacity 0.3s ease);
        color: $black;
        text-decoration: none;
        margin-left: 4px;
        font-weight: bold;
        display: inline-block;
        &.btn-control {
          
          padding:2px 6px 0 6px;
          margin-top:-3px;
          i {
            margin-top:0;
          }
        }
      }
      
      .error {
        color:$error;
      }
      .warning {
        color:$warning;
      }

    }
    i.grcicon-comment {
      @include opacity(0.4);
    }
  }
  .cat-parent {
    color: $darkGray;
    font-size: $f-small;
    display: block;
    line-height: 18px;
    padding-top: 5px;
  }
  .cat-name {
    display: block;
    line-height: 18px;
    padding-bottom: 5px;
  }
  .option {
    font-size: $f-small;
    font-weight: bold;
  }
  .additional-info {
    a {
      color: $link;
    }
  }
  .role {
    font-size: $f-small;
    font-weight: bold;
    text-transform: uppercase;
    color: $green;
  }
  .progress {
    line-height:16px;
    margin:7px 0 0 0;
  }
  .tiny-label {
    font-size:$f-small;
    text-align:right;
    color:$text;
  }
  p {
    margin:0;
    color:$text;
    line-height:18px;
    margin-top:6px;
    margin-bottom:5px;
  }
  .code {
    color:$black;
    font-size:$f-small;
    margin-right:8px;
  }
  .title {
    color:$black;
    //font-weight:bold;
  }
  .mini-risky-attribute {
    color: $risk;
    font-size: $f-small;
    font-weight: bold;
    display: inline-block;
    position: relative;
    top: -2px;
  }
  .not-mapped {
    color: $warning;
    font-size: $f-small;
    font-weight: bold;
    display: inline-block;
  }
  i.description-inline {
    color:$text;
    font-weight:normal;
    margin-left: 10px;
  }
  .view-more {
    font-style: italic;
    text-decoration: underline;
    color: $gray;
    font-size:$f-regular;
    &:hover {
      text-decoration: none;
    }
  }
  .note {
    margin-bottom: 10px;
    border-bottom:1px solid lighten($gray,20%);
    line-height:16px;
    .note-trigger {
      line-height:16px;
      text-decoration: none;
      font-style:italic;
      font-weight: bold;
      @include transition(color 0.3s ease);
      i {
        @include opacity(0.4);
        @include transition(opacity 0.3s ease);
      }
      &:hover {
        color: $black;
        i {
          @include opacity(1);
        }
      }
    }
    .note-text {
      margin-bottom: 10px;
      [class^="grcicon-"] {
        margin-top: 0;
      }
    }
    .note-content {
      @include clearfix();
      padding-bottom:6px;
      .rtf {
        float: left;
        width: 90%;
        margin-bottom: 0;
        font-style: italic;
        line-height: 16px;
        color: $subTitle;
        font-size:$f-regular;
        span {
          display: block;
          font-weight: normal;
          color: $text;
          font-size: $f-small;
        }
      }
      a {
        float: left;
        margin-right: 5px;
        i {
          margin-top: 0;
          @include opacity(0.4);
          @include transition(opacity 0.3s ease);
        }
        &:hover {
          i {
            @include opacity(1);
          }
        }
      }
    }
    textarea {
      /*max-height: 50px;*/
      display: block;
    }
    .cancel-link {
      color: $disabled;
      text-decoration: underline;
      display: inline-block;
      margin-left: 7px;
      &:hover {
        text-decoration: none;
      }
    }
  }
  div.description {
    margin-bottom:10px;
    padding-right:10px;
    @include border-radius();
    .rtf {
      font-size:$f-medium;
      color:$widgetTitle;
    }
    &.inhover {
      border:none;
      padding-left:0;
      padding-right:0;
      background:none;
    }
    &.no-description {
      color: $disabled;
    }
  }
  .openclose {
    margin-top:7px;
    float:left;
    @include opacity(0.4);
    &.active {
      @include opacity(1);
    }
    &.lastchild {
      display:none;
      &.active {
        @include opacity(0.4);
      }
    }
  }
  .item-title {
    margin-left:24px;
    position:relative;
    &:hover {
      .objects-count a,
      .item-actions,
      .openclose {
        @include opacity(1);
      }
    }
    .description {
      color:$subTitle;
    }
    .title {
      margin-right:10px;
    }
    .oneline {
      &.out {
        display:none;
      }
    }
    .description-inline {
      &.out {
        display:none;
      }
    }
    .description {
      display:none;
      &.in {
        display:block;
      }
      &.description-only {
        display:block;
      }
      padding-top: 8px;
    }
  }
  .item-actions {
    line-height:16px;
    position:absolute;
    right:0;
    top:3px;
    @include opacity(0.2);
    @include transition(opacity 0.2s);
    .btn-mini {
      padding-left:0;
      padding-right:0;
      [class^="grcicon-"] {
        display: inline-block;
        margin-top: 0;
      }
    }
  }
  .item-content {
    display:none;
    &.in {
      display:block;
    }
    ul.tree-structure {
      padding-left:24px;
      @include default-border-top();
    }
    .openclose {
      background-position:-128px -56px;
      @include opacity(1);
      &.active {
        background-position:-104px -56px;
      }
    }
    p {
      color:lighten($text,5%);
    }
  }
  &.simple {
    .code {
      background: none;
      @include border-radius(0);
      border: none;
      padding: 1px 0;
    }
    strong {
      display: block;
    }
    .name {
      color: $text;
    }
    li {
      padding:4px 6px 4px 10px;
      &:hover {
        background: $treeListBgnd;
        .inline-info {
          color:$black;
          i {
            @include opacity(0.8);
          }
        }
      }
      &.tab-title-holder {
        padding: 0;
        border: none;
        &:hover {
          background:none;
          border: none;
        }
      }
      &.no-result {
        border-bottom: 1px solid $white;
        &:hover {
          background: none;
          border-bottom: 1px solid $white;
        }
      }
      &.simple-item {
        line-height:14px;
        .item-title {
          margin-left:0;
        }
        .additional-info {
          font-size:$f-small;
          color:$text;
        }
      }
      .item-main {
        a {
          color:$text;
          &.view-more {
            color: $link;
          }
        }
        .addition-info {
          a {
            color: $link;
            display: inline;
          }
        }
      }
    }
    .item-title {
      margin-left:0;
    }
    .additional-info {
      font-size:$f-small;
      color:$text;
      .completed {
        color: $widgetBorder;
      }
    }
    .title {
      .completed {
        color: $text;
      }
    }
  }
  .rtf {
    p {
      line-height:1.2em;
      margin-top:0;
    }
  }
}

.item-identifier {
  position:relative;
  .item-title {
    &.active {
      .showhide {
        background-position:-16px -64px;
        @include opacity(1);
      }
    }
  }
  .showhide {
    margin-right:6px;
  }
  .item-actions {
    line-height:16px;
    position:absolute;
    right:0;
    top:4px;
    @include opacity(0.4);
    @include transition(opacity 0.2s);
    .btn-mini {
      padding-left:3px;
      padding-right:3px;
    }
  }
  &:hover {
    cursor:pointer;
    .item-actions {
      @include opacity(1);
    }
  }
  .key {
    color: $subTitle;
    font-weight:bold;
  }
  .option {
    font-weight: bold;
  }
  .additional-info {
    color:$text;
  }
  p.additional-info {
    line-height:18px;
    display:inline-block;
    margin-top:7px;
    span {
      &:first-child {
        color:$subTitle;
      }
      &.description {
        display:none;
      }
    }
    
  }
  span.label {
    font-weight:normal;
  }
  .view-desc {
    color:$text;
    font-weight:bold;
    &:hover {
     color:$link; 
    }
  }
}

ul.elements {
  @include reset-list();
  margin-left:23px;
  li {
    @include default-border-top();
    line-height:30px;
  }
  .item-title {
    .showhide {
      background-position:-112px -32px;
    }
    &.active {
      .showhide {
        background-position:-96px -32px;
      }
    }
  }
}

.expand-on-hover {
  span, i {
    cursor:pointer;  
  }
}

ul.tree-structure {
  li.process,
  li.system,
  li.product,
  li.orggroup,
  li.project,
  li.facility,
  li.market,
  li.dataasset {
    .code {
      color:$business;
    } 
  }
/*  .notusednow {
    .code {
      color:$compliance;
    } 
  }
*/
  li.risk,
  li.riskyattribute {
    .code {
      color:$risk;
    } 
  }

  li.control,
  li.program,
  li.directive,
  li.policy,
  li.contract,
  li.regulation,
  li.section,
  li.clause {
    .code {
      color:$governance;
    } 
  }

}
